<script setup lang="ts">
const props: any = defineProps<{
    ujt: any;
    asaidata: any;
    fnapi?: any;
}>();
const { $fn } = props.ujt;

if (!props.asaidata?.data && props.asaidata.path) {
    fnRead();
}
if (props.asaidata.ty === 'txt') {
    props.asaidata.data = JSON.stringify(props.asaidata.data, null, 2);
}

function fnRead() {
    props.fnapi
        ?.apiGet('/api/asaijson/manage/select/?path=' + props.asaidata.path)
        .then((res: any) => {
            props.asaidata.data = res.data;
        });
}
function fnDelete() {
    props.fnapi
        ?.apiGet('/api/asaijson/manage/delete/?path=' + props.asaidata.path)
        .then((res: any) => {
            console.log(666.703, res);
        });
}
function fnSubmit() {
    props.fnapi
        ?.apiPost(
            '/api/asaijson/manage/update/?path=' + props.asaidata.path,
            props.asaidata.data
        )
        .then((res: any) => {
            console.log(666.702, res);
        });
}
</script>

<template>
    <div class="as-json-area as-form-line">
        <div class="as-json-tit" v-if="asaidata.btn">
            <button @pointerdown="fnRead()">{{ $fn.lg('asai.read') }}</button>
            <input type="text" v-model="asaidata.path" />
            <select v-model="asaidata.path" v-if="asaidata.list?.length">
                <option v-for="item in asaidata.list" :value="item.value">
                    {{ item.label }}
                </option>
            </select>
        </div>
        <div class="as-json-main">
            <template v-if="asaidata.ty == 'txt'">
                <textarea
                    class="as-json-txt"
                    v-model="asaidata.data"
                ></textarea>
            </template>
            <template v-else>
                {{
                    asaidata.eq > 1 ? (Array.isArray(asaidata) ? '[' : '{') : ''
                }}
                <AsaiForm :ujt="ujt" :asaidata="asaidata"></AsaiForm>
                {{
                    asaidata.eq > 1 ? (Array.isArray(asaidata) ? ']' : '}') : ''
                }}
            </template>
        </div>
        <div class="as-json-btns" v-if="asaidata.btn">
            <button @pointerdown="fnSubmit()">
                {{ $fn.lg('asai.submit') }}
            </button>
            <button @pointerdown="fnDelete()">{{ $fn.lg('asai.del') }}</button>
        </div>
    </div>
</template>
<style scoped lang="scss">
.as-json-area {
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    button {
        background-color: var(--cm8);
        color: var(--cm0);
        border-radius: var(--radius);
        cursor: pointer;
        padding: 0 12px;
        height: 38px;
        margin-right: 12px;
    }
    .as-json-txt {
        width: 100%;
        height: 528px;
    }
    .as-json-tit {
        display: flex;
        justify-content: center;
        align-items: center;
        > select,
        > button,
        > input {
            display: block;
            height: 38px;
        }
        > button {
            width: auto;
        }
        > input {
            flex-grow: 1;
            padding: 0 12px;
        }
    }
    .as-json-tit,
    .as-json-btns {
        height: auto;
        padding: 10px 12px;
        background-color: var(--ch2);
    }
    .as-json-main {
        background-color: var(--ch0);
        padding: 0 12px;
        flex-grow: 1;
        overflow: auto;
    }
    .as-json-btns {
        text-align: right;
    }
}
</style>
